<?php

#################################################################
#								HTML
#################################################################

/**
 * Input field component registed as 'element/input'
 * 
 * $vars['name']
 * $vars['password']
 * $vars['value']
 * $vars['description']
 * $vars['class']
 * $vars['width']
 * $vars['id']
 * $vars['onChange']
 */

if($_CONTEXT=='HTML'){

	$_CSS_STACK->push(blg_get_site_url().'element/input.css', TRUE);
	$_JS_STACK->push(blg_get_site_url().'element/input.js', TRUE);

	//PREPARE DEFAULTS
	if(!is_bool($vars['password']))
		$vars['password']= FALSE;
		
	if(empty($vars['id']))
		$vars['id']= 'input_'.random_string(12);
		
	$id= random_string(12);
	$text_id= 'T_'.$id;
	$desc_id= 'D_'.$id;

	$class= 'blg_input';		
	
	//BUILD		
	$input= '<input type="'.($vars['password']?'password':'text').'"';
	
	if(!empty($vars['name']))
		$input.= ' name="'.$vars['name'].'"';
		
	if(!empty($vars['id']))
		$input.= ' id="'.$vars['id'].'" blg_id="'.$vars['id'].'"';		
		
	if(!empty($vars['class']))
		$input.= ' class="'.$class.' '.$vars['class'].'"';
	else
		$input.= ' class="'.$class.'"';
		
	if(!empty($vars['width'])){
		if(is_int($vars['width']))
			$input.= ' style="width:'.$vars['width'].'px;"';
		else
			$input.= ' style="width:'.$vars['width'].';"';
	}		

	if(!empty($vars['description']))
			$input.= ' description="'.sanitize_for_html_attr($vars['description']).'" switchempty="'.$desc_id.'" input_id="'.$text_id.'"';
	
	if(!empty($vars['value']))
		$input.= ' value="'.sanitize_for_html_attr($vars['value']).'"';		
	
	$input.= ' />';
	
	if(!empty($vars['description'])){
		$input.= '<input type="text" ';

		if(!empty($vars['id']))
			$input.= ' id="'.$desc_id.'" blg_id="'.$vars['id'].'"';

		$input.= ' switchfilled="'.$text_id.'"';			
			
		if(!empty($vars['class']))
			$input.= ' class="'.$class.' blg_input_description hide'.$vars['class'].'"';
		else
			$input.= ' class="'.$class.' blg_input_description hide"';
			
		if(!empty($vars['width'])){
			if(is_int($vars['width']))
				$input.= ' style="width:'.$vars['width'].'px;"';
			else
				$input.= ' style="width:'.$vars['width'].';"';
		}
		
		$input.= ' value="'.sanitize_for_html_attr($vars['description']).'"';		
		
		$input.= ' readonly="readonly" />';
	}
	
	echo $input;
	
	if(!empty($vars['description'])){
		echo blg_view('element/tipsy', array(
			'id' => $vars['id'],
			'title' => 'description',
			'gravity' => 'e',
			'trigger' => 'focus'
		));
	}
	
	if(!empty($vars['onChange'])){
		$code="
			$('#".$vars['id']."').bind('change keyup focus blur click', function(){
				".add_trainling_slash($vars['onChange'], ';')."
			});
		";
		
		$_JS_CODE->append($code, ON_DOC_READY);				
	}

}
#################################################################
#								JS
#################################################################
elseif($_CONTEXT=='JS'){ ?>

function blg_component_input_switchempty_blur(input){
	if($.trim(input.val())==''){
		id= input.attr('switchempty');
		input.hide();
		$('#'+id).show();
	}
}

function blg_component_input_switchfilled_focus(input){
	id= input.attr('switchfilled');
	input.hide();
	$('input[input_id='+id+']').show();
	$('input[input_id='+id+']').focus();
}

$(document).ready( function(){
	$('input').live('focus', function(){
		$(this).addClass('blg_input_focused');		
	});
	
	$('input').live('blur', function(){
		$(this).removeClass('blg_input_focused');		
	});	
		
	$('input[switchempty]').bind('blur', function(){
		blg_component_input_switchempty_blur($(this));	
	});	
	
	$('input[switchfilled]').bind('focus', function(){
		blg_component_input_switchfilled_focus($(this));	
	});		
		
	$('input[switchempty]').each(function(){
		blg_component_input_switchempty_blur($(this));				
	});		
});

<?php }
#################################################################
#								CSS
#################################################################
elseif($_CONTEXT=='CSS'){ ?>

input.blg_input{		
	height: 20px;
	line-height: 20px;
	
	color: #000000;
	border: 1px solid <?php echo blg_color('grey', 'D');?>;    
    border-radius:6px;
    
    font-size: 11px;
    padding: 0 4px;
    margin: 1px;
    
    background-image: url('<?php echo blg_get_site_url()?>_graphics/default/structure/sombra4.png');
}
input.blg_input:hover{
	border: 1px solid <?php echo blg_color('grey', 'B');?>;
}

input.blg_input_description{
	color: <?php echo blg_color('grey', 'A');?>;
}

input.blg_input_focused{
	border: 1px solid <?php echo blg_color('blue', 'dark');?>;
}
input.blg_input_focused:hover{
	border: 1px solid <?php echo blg_color('blue', 'dark');?>;
}

<?php }
